<template>
    <div class="number-data">
        <div class="item" v-for="(item, index) in list" :key="index">
            <h2>{{item.title}}
                <el-tooltip v-if="item.tips">
                    <template #content>
                        <div style="width: 200px;line-height: 2;">
                            {{item.tips}}
                        </div>
                    </template>
                    <i class="el-icon-question" style="color:#000;"></i>
                </el-tooltip>
            </h2>
             <p>{{item.value}} <span v-if="item.unit" style="font-size: 12px;">{{item.unit}}</span></p>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        list: { 
            type: Array,
            default:() => [
                {title: '访客数(UV)', tips: '一天之内您网站的独立访客数(以Cookie为依据)，一天内同一访客多次访问您网站只计算1个访客。', value: '8,936'},
                {title: 'IP数', tips: '一天之内您网站的独立访问ip数。', value: '10,279'},
                {title: '跳出率', tips: '只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。', value: '27.92%'},
                {title: '平均访问时长', tips: '访客在一次访问中，平均打开网站的时长。即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。', value: '00:19:05'},
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.number-data {display: flex;}
.number-data .item {flex:1;border-right: 1px solid #f0f0f0;padding:0 20px;}
.number-data .item:last-child {border: 0;}
.number-data .item h2 {font-size: 12px;color: #787a7d;font-weight: normal;}
.number-data .item h2 i {margin-left: 5px;color: #8cc5ff;cursor: pointer;}
.number-data .item p {font-size: 20px;color: #121315;margin-top: 10px;}

[data-theme='dark'] .number-data .item {border-color: var(--el-border-color-base);}
[data-theme='dark'] .number-data .item p {color: #d0d0d0;}
</style>